<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vuex-1</title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/vuex.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="vuex-1">
			<p>{{count}}</p>
			<p>
				<button @click="increment">+</button>
				<button @click="decrement">-</button>
			</p>
		</div>
	</body>
	<script type="text/javascript">
		const store = new Vuex.Store({
			state:{
				count:0
			},
			mutations:{
				increment(state,payload){
					state.count+=payload.amount
				},
				decrement(state){
					state.count--
				}
			},
			actions:{
				increment ({commit}) {
					commit('increment')
				}
			}
		})
		
		const app = new Vue({
			el:'#vuex-1',
			computed:{
				count(){
					return store.state.count
				}
			},
			methods:{
				increment () {
					store.commit({
						type:'increment',
						amount:5
					})
				},
				decrement () {
					store.commit('decrement')
				}
			}
		})
	</script>
</html>
